<!--
* 任务统计组件
* |-- div(.dept-manage-task-container) 总容器
*   |-- Selector 小组、学生选择器，@on-change 返回选中的学生
*   |-- div(.dept-manage-task-content) 显示选中学生的任务详细统计信息
*     |-- div(.dept-manage-task-content-finish) 已完成模块
*       |-- Divider "已完成" 分割线
*       |-- div(.dept-manage-task-content-item) 遍历 list 中的已完成记录，并显示每个任务的任务主题
*     |-- div(.dept-manage-task-content-ready) 待完成模块
*       |-- Divider "待完成" 分割线
*       |-- div(.dept-manage-task-content-item) 遍历 list 中的待完成记录，并显示每个任务的任务主题
*     |-- div(.dept-manage-task-content-unfinish) 未完成模块
*       |-- Divider "未完成" 分割线
*       |-- div(.dept-manage-task-content-item) 遍历 list 中的未完成记录，并显示每个任务的任务主题
-->
<template>
    <div class="dept-manage-task-container">
        <Selector @on-change="getChange" />
        <div class="dept-manage-task-content" v-if="list != undefined">
            <div class="dept-manage-task-content-finish">
                <Divider>已完成</Divider>
                <div 
                    class="dept-manage-task-content-item" 
                    v-for="(item, index) in list.finished" 
                    :key="'ed' + index">
                    {{item.subject}}
                </div>
            </div>
            <div class="dept-manage-task-content-ready">
                <Divider>待完成</Divider>
                <div 
                    class="dept-manage-task-content-item" 
                    v-for="(item, index) in list.ready" 
                    :key="'re' + index">
                    {{item.subject}}
                </div>
            </div>
            <div class="dept-manage-task-content-unfinish">
                <Divider>未完成</Divider>
                <div 
                    class="dept-manage-task-content-item" 
                    v-for="(item, index) in list.unfinish" 
                    :key="'un' + index">
                    {{item.subject}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import Selector from "@dept/vue/selector-index"
import task_request from "@/axios/task"

export default {
    data() {
        return {
            list: undefined     // 待显示的任务列表
        }
    },
    methods: {
        /**
         * 数据归零操作
         */
        dataInit() {
            this.list = {
                unfinish: [],   // 未完成列表
                finished: [],   // 已完成列表
                ready: []       // 待完成列表
            }
        },
        /**
         * 每当选择的学生发生变化，变向服务器请求该学生的任务情况
         * 并将所有任务进行分类处理
         * @param {String} v 选中学生的学号
         */
        async getChange(v) {
            this.dataInit()
            let result  = await task_request.queryTask(v, undefined, undefined, -1, -1)
            result.forEach(item => {
                if (item.complete == 1) 
                    this.list.finished.push(item)
                else if (item.close == 0) 
                    this.list.ready.push(item)
                else 
                    this.list.unfinish.push(item)
            });
        }
    },
    components: {
        Selector
    }
}
</script>

<style lang="scss">
@import "@dept/scss/manage-task.scss";
</style>